<!-- 导航栏 -->
<template>
	<view class="cf dx-header" :style="{paddingTop:dxstatusBarHeight}">
		<image src="@/static/img/bgdskdf.png" class="fxcvrtxretr"></image>
		<view class="cf dx-header-centext pd display-flex pr">
			<view class="vertical-center pr20 map-dinsdser" v-if="isback" @tap="callBack">
				<icon class="iconfont icon-left"></icon>
				
				<!-- <image src="../static/img/bottom/left.png" class="kkdfsxtwer" mode="widthFix"></image> -->
			</view>
			<view class="map-dinsdser" v-if="showmap">
				<image src="../static/img/locationIcon.png" class="kxczxferxer cz"></image>
				<text class="cf cz fz28 ml10">{{dqwz}}</text>
			</view>
			<view class="vertical-center  fz34 flex-1">
				{{title}}
			</view>
		</view>
		<view class="nmnjsdrtwe" :style="{opacity:(isTop/100)}">
			
		</view>
	</view>
</template>
<script lang="ts" setup>
	import {ref} from "vue"
	import {callBack,dxrequest} from "@/util/index.js"
	const info = uni.getSystemInfoSync()
	const dxstatusBarHeight = ref(info.statusBarHeight+'px')
	const dqwz = ref()//当前定位
	const props = defineProps({
	  title:{ type: String },
	  isTop:{ type: Number,default:0 },
	  isback:{ type: Boolean,default:false },
	  showmap:{type: Boolean,default:false }
	});
	uni.getLocation({
			type: 'wgs84',
			success: async function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				const {data} = await dxrequest("public/reverseGeocoding",{
					location:res.latitude+','+res.longitude
				})
				dqwz.value = data.city
			}
		});
	
</script>

<style scoped>
	.dx-header{
		position: sticky;
		top: 0;
		z-index: 999;
		
	}
	.dx-header-centext{
		height: 76rpx;
	} 
	.nmnjsdrtwe{
		background: #310240 !important;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.kkdfsxtwer{
		width: 20rpx;
		
	}
	.kxczxferxer{
		width: 26rpx;
		height: 28rpx;
	}
	.map-dinsdser{
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
	}
</style> 